<style lang="less" scoped>
@import "../../styles/common.less";
</style>

<template>
    <div>
        <Modal
            v-model="showModal"
            :title="`${mode}规则`"
            :ok-text="mode"
            :loading="submitting"
            @on-ok="handleSubmit"
        >
            <Form :model="formItem" :label-width="80" :rules="formRule" ref="form">
                <FormItem label="设备类型: " prop="type">
                    <Select v-model="formItem.type" style="width: calc(100% - 40px)">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="型号: " prop="model">
                    <Input v-model="formItem.model" style="width: calc(100% - 40px)"></Input>
                </FormItem>
                <FormItem label="计费规则: " prop="rule">
                    <Input v-model="formItem.rule" style="width: calc(100% - 40px)" type="textarea"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Card style="min-height: calc(100vh - 128px)">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <div style="display: flex">
                        <Tabs :value="tableMode" style="margin-bottom: 0" type="card" @on-click="switchTab">
                            <TabPane label="医疗设备" name="hospital" icon="medkit"></TabPane>
                            <TabPane label="科研设备" name="research" icon="ios-medical"></TabPane>
                        </Tabs>
                    </div>
                    <div>
                        <Tooltip content="新增">
                            <Button type="warning" @click="addRule" style=" margin-left: 8px"><Icon type="plus"></Icon> </Button>
                        </Tooltip>
                        <Tooltip content="排序和过滤后的数据">
                            <Button type="primary" @click="exportData(2)"><Icon type="funnel"></Icon> </Button>
                        </Tooltip>
                        <Tooltip content="原始数据">
                            <Button type="primary" @click="exportData(1)"><Icon type="ios-download"></Icon> </Button>
                        </Tooltip>
                    </div>
                </div>
                <Row v-show="tableMode==='hospital'">
                    <Col span="24">
                        <Table :columns="ruleColumns" :data="ruleData" size="small" ref="ruleTable"></Table>
                    </Col>
                </Row>
            </Card>
        </Row>
    </div>
</template>

<script>
import { ruleData, ruleColumns } from "./data/rule.js";
export default {
  name: "event-process",
  data() {
    return {
      ruleData,
      ruleColumns,
      submitting: false,
      tableMode: "hospital",
      csvFileName: "",
      mode: "",
      showModal: false,
      typeList: [
        { value: "核磁共振仪", label: "核磁共振仪" },
        { value: "显微镜", label: "显微镜" },
        { value: "人工肺", label: "人工肺" }
      ],
      formItem: {
        type: "",
        model: "",
        rule: ""
      },
      formRule: {
        type: [{ required: true, message: "请输入设备种类", trigger: "blur" }],
        model: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
        rule: [{ required: true, message: "请输入计费规则", trigger: "blur" }]
      }
    };
  },
  mounted() {
    window.edit = this.edit;
    window.remove = this.remove;
  },
  methods: {
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$Message.success(`${this.mode}成功!`);
        } else {
          this.$Message.error(`${this.mode}失败!`);
          setTimeout(() => {
            this.submitting = false;
          }, 1000);
        }
      });
    },
    switchTab(name) {
      this.tableMode = name;
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表"
        });
      } else if (type === 2) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表(排序和过滤后)",
          original: false
        });
      }
    },
    addRule() {
      this.formItem = {
        type: "",
        model: "",
        rule: ""
      };
      this.showModal = true;
      this.mode = "新增";
    },
    edit(row) {
      this.formItem = {
        type: row.type,
        model: row.model,
        rule: row.cost_rule
      };
      this.showModal = true;
      this.mode = "修改";
    },
    remove(row) {
      this.$Modal.confirm({
        title: "删除规则",
        content: `确定删除<strong>${row.type}（${
          row.model
        }）</strong>的计费规则 ？`,
        onOk: () => {}
      });
    }
  }
};
</script>

<style>

</style>
